import React from "react";
import { Tabs, Button, Form, Input, Select, Mention, Row, Col } from "antd";
const TabPane = Tabs.TabPane,
    FormItem = Form.Item,
    Option = Select.Option;

class Add extends React.Component {

    componentWillMount() {
        const {setPage} = this.props;
        setPage([{
            title: "车联网平台首页",
            url: "/dashboard"
        }, {
            title: "车辆管理",
            url: "/vehicle"
        }], "新增车辆")
    }

    render() {
        const Create = Form.create()(CreateForm),
        Relation = Form.create()(RelationForm);
        return <div>
                   <Tabs>
                       <TabPane tab="新增车辆" key="1">
                           <Create />
                       </TabPane>
                       <TabPane tab="关联车辆" key="2"><Relation /></TabPane>
                   </Tabs>
               </div>
    }
}

class CreateForm extends React.Component {
    render() {
        const {getFieldDecorator} = this.props.form;

        const sampleLayout = {
            labelCol: {
                span: 2
            },
            wrapperCol: {
                span: 5
            },
        };
        const descriptionLayout = {
            labelCol: {
                span: 2
            },
            wrapperCol: {
                span: 10
            },
        }

        return <Form>
                   <FormItem {...sampleLayout} label="终端号" hasFeedback>
                       { getFieldDecorator('code', {
                             rules: [{
                                 required: true,
                                 message: '请输入车载智能终端编号!',
                             }]
                         })(
                             <Input />
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="车架号" hasFeedback>
                       { getFieldDecorator('vim', {
                             rules: [{
                                 required: true,
                                 message: '请输入车架号!',
                             }]
                         })(
                             <Input />
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="车牌号" hasFeedback>
                       { getFieldDecorator('plate', {
                             rules: [{
                                 required: true,
                                 message: '请输入车牌号!',
                             }]
                         })(
                             <Input />
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="车辆型号">
                       { getFieldDecorator('model', {
                             rules: [{
                                 required: true,
                                 message: '请选择车辆型号!',
                             }]
                         })(
                             <Select>
                                 <Option value="1">凌特2016</Option>
                                 <Option value="2">一汽川专780</Option>
                                 <Option value="3">黄海e2016</Option>
                             </Select>
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="车辆性质">
                       { getFieldDecorator('type', {
                             rules: [{
                                 required: true,
                                 message: '请选择车辆型号!',
                             }]
                         })(
                             <Select>
                                 <Option value="1">运营</Option>
                                 <Option value="0">非运营</Option>
                             </Select>
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="当前用户" hasFeedback>
                       { getFieldDecorator('user', {
                             rules: [{
                                 required: true,
                                 message: '请输入当前用户!',
                             }]
                         })(
                             <Input />
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="车辆标签">
                       { getFieldDecorator('tags', {})(
                             <Select multiple>
                                 <Option value="1">运营</Option>
                                 <Option value="2">四川</Option>
                                 <Option value="3">黄海</Option>
                                 <Option value="4">物流车</Option>
                                 <Option value="5">校车</Option>
                             </Select>
                         ) }
                   </FormItem>
                   <FormItem {...descriptionLayout} label="备注" help="备注内容不能超过200个字">
                       { getFieldDecorator('description', {
                        rules: [{
                                 min: 0,
                                 max: 200,
                                 message: '备注内容不能超过200个字!',
                             }]
                       })(
                             <Input type="textarea" rows={4} maxLength="200" />
                         ) }
                   </FormItem>
                   <FormItem wrapperCol={ { span: 10, offset: 2 } } className="mt20">
                       <Button type="primary" htmlType="submit" size="large">
                           确定并继续新增
                       </Button>
                       <Button type="primary" htmlType="submit" size="large" className="ml20">
                           确定
                       </Button>
                   </FormItem>
               </Form>
    }
}

class RelationForm extends React.Component {
    render() {
        const {getFieldDecorator} = this.props.form;

        const sampleLayout = {
            labelCol: {
                span: 2
            },
            wrapperCol: {
                span: 5
            },
        };
        const descriptionLayout = {
            labelCol: {
                span: 2
            },
            wrapperCol: {
                span: 10
            },
        }

        return <Form>
                   <FormItem {...sampleLayout} label="终端号" hasFeedback>
                       { getFieldDecorator('code', {})(
                             <Input />
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="车架号" hasFeedback>
                       { getFieldDecorator('vim', {})(
                             <Input />
                         ) }
                   </FormItem>
                   <FormItem {...sampleLayout} label="车牌号" hasFeedback>
                       { getFieldDecorator('plate', {})(
                             <Input />
                         ) }
                   </FormItem>
                   <Row>
                    <Col span="6" offset="2" className="mb10">
                        提示：至少填写2条车辆信息
                    </Col>
                   </Row>
                   <FormItem {...sampleLayout} label="车辆标签">
                       { getFieldDecorator('tags', {})(
                             <Select multiple>
                                 <Option value="1">运营</Option>
                                 <Option value="2">四川</Option>
                                 <Option value="3">黄海</Option>
                                 <Option value="4">物流车</Option>
                                 <Option value="5">校车</Option>
                             </Select>
                         ) }
                   </FormItem>
                   <FormItem wrapperCol={ { span: 10, offset: 2 } } className="mt20">
                       <Button type="primary" htmlType="submit" size="large">
                           确定并继续关联
                       </Button>
                       <Button type="primary" htmlType="submit" size="large" className="ml20">
                           确定
                       </Button>
                   </FormItem>
               </Form>
    }
}

export default Add;